<template>
	<el-button @click="getImage" text type="primary" size="large"
		>截图保存</el-button
	>
</template>

<script lang="ts" setup>
import { toJpeg } from "html-to-image";
import pkg from "file-saver";
import { ElButton, ElLoading, ElMessage } from "element-plus";
import { nextTick } from "vue";
const { saveAs } = pkg;
async function getImage() {
	let element = document.getElementById("main-content");
	if (element) {
		let loading = ElLoading.service({ fullscreen: true });
		try {
			await nextTick();
			let image = await toJpeg(element);
			saveAs(image, `737外部检查@${new Date()}.jpeg`);
		} catch (err) {
			//
			ElMessage({
				type: "error",
				message: "保存失败，浏览器不支持",
			});
		}
		loading.close();
	}
}
</script>

<style lang="stylus" scoped></style>
